<template>
	<!-- 注意1:使用垂直flex布局 -->
	<div class="table w-h-100 ver-flex" style="width: 100%">
		<div :class="{ isHidden: title.length == 0, header: title.length > 0 }">
			<!-- 设置header 如果没有默认 显示title -->
			<slot name="header">
				<div class="title">
					{{ title }}
				</div>
			</slot>
			<div class="handler">
				<slot name="headerHandle"></slot>
			</div>
		</div>
		<!-- 注意2:content-设置为flex:1, 并相对定位 -->
		<div style="" class="flex-1 pos-r">
			<!-- 注意3:子绝父相,设置table容器使用绝对定位 -->
			<div style="" class="pos-a w-h-100">
				<!-- 设置了绝对定位,因为content-header容器高度足够,但content-body高度不够就会自动滚动 -->
				<!-- :header-cell-style="{ background: 'orange', padding: '0px' }" 配置eltable额外属性 -->
				<el-table
					ref="multipleTable"
					:row-class-name="tableRowClassName"
					class="w-h-100"
					:class="{ active: config?.size == 'small' }"
					:data="dataList"
					:stripe="false"
					border
					style="width: 100%"
					v-bind="childrenProps"
					@selection-change="handleSelectionChange"
					@row-click="rowClick"
				>
					<el-table-column :label="$t('a50')" align="center" width="55" v-if="showSingleCheckColumn">
						<template #default="scopeeeeee">
							<el-radio :label="indexMethod(scopeeeeee.$index)" v-model="radio1" @change.native="getCurrentRow(scopeeeeee.row)">&nbsp;</el-radio>
						</template>
					</el-table-column>
					<!-- type="selection"序号列 全选列 -->
					<el-table-column v-if="showCheckColumn" type="selection" width="55" align="center"> </el-table-column>
					<!--type="index"序号列 min-width 设置自适应宽度  width强制宽度 会把剩余宽度按比例分配给设置了-->
					<el-table-column v-if="showIndexColumn" :label="$t('a51')" type="index" width="55" align="center" :index="indexMethod"></el-table-column>
					<template v-for="prop in propList" :key="prop.prop">
						<el-table-column v-bind="prop" align="center">
							<template #default="scopeeeeee">
								<!-- <template v-if="op[moreItem.key]"> 除了三目运算,另一种判断方式可以使用v-if -->
								<slot :name="prop.slotName" :row="scopeeeeee.row" :prop="prop">{{
									prop.v ? prop.v : prop.formatDay && scopeeeeee.row[prop.prop] ? formatTime(scopeeeeee.row[prop.prop]).currentDay : scopeeeeee.row[prop.prop]
								}}</slot>
							</template>
						</el-table-column>
					</template>
				</el-table>
			</div>
		</div>

		<div class="footer" v-if="showFooter">
			<slot name="footer">
				<el-pagination
					v-model:currentPage="currentPage"
					v-model:page-size="pageSize"
					:total="dataCount > 0 ? dataCount : dataList.length"
					:page-sizes="[20, 50, 100]"
					small
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					layout="total, sizes, prev, pager, next, jumper"
				/>
			</slot>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmits } from 'vue';
import { formatTime } from '/@/utils/hook/index.ts';

//需要从外部传来data属性, 以及el-table-column的数组对象
const props = defineProps({
	title: {
		type: String,
		default: '',
	},
	//data数据
	dataList: {
		type: Array,
		required: true,
	},
	//config 配置table
	config: {
		type: Object,
		required: false,
	},
	//prop 设置el-table-column 配置
	propList: {
		type: [Array] as any[],
		required: true,
	},
	//是否显示单选column
	showSingleCheckColumn: {
		type: Boolean,
		default: false,
	},
	//是否显示序号column
	showIndexColumn: {
		type: Boolean,
		default: false,
	},
	//是否显示选择列
	showCheckColumn: {
		type: Boolean,
		default: false,
	},
	dataCount: {
		type: Number,
		default: 0,
	},
	//pageInfo 是一个双向绑定的数据
	page: {
		type: Object,
		//数组或object必须是一个函数返回
		default: () => ({
			currentPage: 1,
			pageSize: 20,
		}),
	},
	//表格中的子菜单
	childrenProps: {
		type: Object,
		default: () => ({}),
	},
	//显示footer
	showFooter: {
		type: Boolean,
		default: true,
	},
	handleSizeChange: {
		type: Function,
		default: () => {},
	},
	handleCurrentChange: {
		type: Function,
		default: () => {},
	},
});

//可以使用emit将值返回
const emit = defineEmits(['handleSelectionChange', 'update:SizeChange', 'selectItem', 'singleSelect']);

const multipleTable = ref();
const currentPage = ref(props.page.currentPage);
const pageSize = ref(props.page.pageSize);
const selectList: any = ref([]);
// 设置序列号
const indexMethod = (index: number) => {
	if (currentPage.value > 1) {
		return index + 1 + (currentPage.value - 1) * pageSize.value;
	} else {
		return index + 1;
	}
};
//多选操作回调函数
const handleSelectionChange = (value: any[]) => {
	//返回的是一个数组
	emit('handleSelectionChange', value);
	// //为0时清空本地保存的选项
	// if (value.length == 0) {
	// 	selectList.value = [];
	// }
	selectList.value = value;
};
const radio1 = ref('999999');
//单选操作回调函数
function getCurrentRow(selectData: any) {
	emit('singleSelect', selectData);
}
//设置table.row的index
const tableRowClassName = (table: any) => {
	table.row.index = table.rowIndex;
};
//点击事件
const rowClick = (row: any) => {
	//单选,选中行默认选中
	if (props.showSingleCheckColumn) {
		radio1.value = row.index + 1;
		getCurrentRow(row);
	}
	//多选
	else if (props.showCheckColumn)
		var index: any = selectList.value.findIndex((item: any) => {
			// 判断已选数组中是否已存在该条数据
			return item.id == row.id;
		});
	if (index == -1) {
		// 如果未存在，设置已选状态，并在list中添加这条数据
		multipleTable.value.toggleRowSelection(row, true); //设置复选框为选中状态
		// selectList.value.push(row);
	} else {
		// 如果已存在，设置未选状态，并在list中删除这条数据
		multipleTable.value.toggleRowSelection(row, false); //设置复选框为未选状态
		// selectList.value.splice(index, 1);
	}
	emit('selectItem', row);
};
//pagesize或page发生改变时, 通知外部改变,发送请求
// const handleSizeChange = (pageSize: any) => {
// 	emits.emit('update:page', pageSize);
// };
// const handleCurrentChange = (currentPage: any) => {
// 	console.log(currentPage, 'currentPage');
// 	emits.emit('update:page', currentPage);
// };
defineExpose({
	selectList,
});
</script>

<style scoped lang="scss">
.active {
	:deep(.cell) {
		padding: 3px;
	}
}
:deep(.el-radio__label) {
	padding: 0;
}
.isHidden {
	display: none;
}
.header {
	height: 45px;
	display: flex;
	justify-content: space-between;
	.title {
		font-weight: 700;
	}
}
.footer {
	display: flex;
	justify-content: right;
	padding: 15px;
}
.el-table__fixed-body-wrapper {
	z-index: auto !important;
}
</style>
